<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background: red;
        }

        .box {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <!-- <div class="container">
        <div class="box"></div>
    </div> -->

    <ul>
        <li>333</li>
        <p>222</p>
        <span>111</span>
    </ul>
    <script>
        //一、 阻止事件冒泡 
        // var containerEle = document.querySelector(".container");
        // var boxEle = document.querySelector(".box");
        // containerEle.onclick = function(){
        //     this.style.background = "pink";
        // }

        // // stopPropagation ：停止传播；
        // // cancelBubble= true;阻止冒泡
        // boxEle.onclick = function(e){
        //     // 方式一：
        //     // e.stopPropagation();
        //     // 方式二 
        //     e.cancelBubble = true;
        //     this.style.background = "black";
        // }

        // 二、触发目标e.target 如果是ie8或者以下；e.srcElement
        //    var ulEle =  document.querySelector("ul");
        //    ulEle.addEventListener("click",function(e){
        //         console.log(e.target);
        //    })


        var ulEle = document.querySelector("ul");
        //    ulEle.attachEvent("onclick",function(e){
        //        var e = e || window.event;
        //         // console.log(e.target);
        //         // console.log(e.srcElement);

        //    })
        bindEvent(ulEle,"click",function(event){
            var e = event || window.event;
            var target = e.target || e.srcElement;
            console.log(target);

        })


        function bindEvent(ele, eventName, fn) {
            // 判断浏览器是否支持 addEventListener方法 
            if (window.addEventListener) {
                // 有addEventListener 是chrome浏览器
                ele.addEventListener(eventName, fn);
            } else {
                // ie8或者以下；
                ele.attachEvent("on" + eventName, fn);
            }
        }


        // 一.阻止事件冒泡 1.e.stopPropagation() 2.e.cancelBubble = true;
        // 二、目标元素： e.target || e.srcElement
    </script>
</body>

</html>